<template>
  <div class="orderDetail">
    <el-page-header @back="goBack" content="工单详情"></el-page-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix header">
        <span>工单信息</span>
      </div>
      <el-form :model="orderForm" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题设备">
              <span
                >{{ orderForm.engineer_name }}-{{ orderForm.device_name }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备问题">
              <span v-if="orderForm.bill_why !== null">{{
                orderForm.bill_why
              }}</span>
              <span v-else>未说明问题</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工单类型">
              <span>{{ orderForm.type }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单状态">
              <el-tag
                type="succees"
                v-if="orderForm.status === '已完成'"
                size="small"
                >已完成</el-tag
              >
              <el-tag
                type="danger"
                v-if="orderForm.status === '待接单'"
                size="small"
                >待接单</el-tag
              >
              <el-tag
                type="warning"
                v-if="orderForm.status === '进行中'"
                size="small"
                >进行中</el-tag
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{ orderForm.create_time | fmtTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间">
              <span v-if="orderForm.finish_time !== null">{{
                orderForm.finish_time | fmtTime
              }}</span>
              <span v-else>未完成</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始图片">
              <div v-if="orderForm.begin_photos.length > 0">
                <img
                  :src="item"
                  alt=""
                  v-for="(item, index) in orderForm.begin_photos"
                  :key="index"
                />
              </div>
              <div v-else>暂无图片</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束图片">
              <div v-if="orderForm.end_photos.length > 0">
                <img
                  :src="item"
                  alt=""
                  v-for="(item, index) in orderForm.end_photos"
                  :key="index"
                />
              </div>
              <div v-else>暂无图片</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderForm: {},
    };
  },
  created() {
    this.orderForm = this.$route.query;
    console.log(this.orderForm);
  },
  methods: {
    //事件监听
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style>
.header {
  font-size: 18px;
  font-weight: 700;
}
.box-card {
  margin-top: 15px;
  width: 100%;
}
img {
  width: 150px;
  height: 150px;
  margin-right: 15px;
}
</style>